<template>
	<view class="cc-position-input" :style="{
		'--light-color': $theme.lightColor,
		'--primary': $theme.primary
	}">
		<w-input 
			v-if="placeholder"
			v-model="address" 
			type="textarea" 
			:max-length="maxLength" 
			:inputCount="false"
			:placeholder="placeholder"
			@input="change"
			:disabled="disabled"
			height="100"
		></w-input>
		<view class="cc-position-input__position" @click="chooseLocation" :style="{opacity: disabled ? 0.5 : 1}">
			<text class="cc-position-input__position__icon icon-location"></text>
			<text>获取定位</text>
		</view>
	</view>
	
</template>

<script>
	/**
	 * 位置选择组件
	 */
	import Emitter from '../../libs/util/emitter.js';
	export default {
		mixins: [Emitter],
		props: {
			value: {
				type: Object,
				default: () => ({
					position: {
						latitude: null,
						longitude: null
					},
					address: ''
				})
			},
			maxLength: {
				type: [Number, String],
				default: 140
			},
			disabled: {
				type: Boolean,
				default: false
			},
			// 获取定位的自定义方法
			getLocationFn: {
				type: Function
			}
		},
		data() {
			return {
				address: '',
				position: {
					latitude: null,
					longitude: null
				}
			}
		},
		watch: {
			value: {
				handler(newValue) {
					// 如果默认值是null或{} 则将父组件的value值同步成标准格式
					if (newValue == null || Object.keys(newValue).length == 0) {
						this.$emit('input', {
							position: {
								latitude: null,
								longitude: null
							},
							address: ''
						});
					} else {
						this.position = { ...newValue.position };
						this.address = newValue.address;
					}
				},
				deep: true,
				immediate: true
			}
		},
		computed: {
			placeholder() {
				if (!this.position.longitude || !this.position.latitude) {
					return false;
				} else {
					return `当前已选坐标：${this.position.longitude.toFixed(6)}，${this.position.latitude.toFixed(6)}`;
				}
			}
		},
		methods: {
			chooseLocation() {
				if (this.disabled) return;
				if (this.getLocationFn) {
					this.getLocationFn().then(res => {
						this.address = res.name;
						this.position = {
							latitude: res.latitude,
							longitude: res.longitude,
						}
						this.change();
					});
				} else {
					uni.chooseLocation({
						success: res => {
							this.address = res.name;
							this.position = {
								latitude: res.latitude,
								longitude: res.longitude,
							}
							this.change();
						},
						fail: err => {
							this.$w.permission('location');
						}
					})
				}
			},
			change() {
				let value = {
					position: { ...this.position },
					address: this.address
				};
				this.$emit('input', value);
				this.$emit('change', value);
				this.$nextTick(() => {
					this.dispatch('w-form-item', 'on-form-change', value);
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '../../libs/css/variable.scss';
	@font-face {
		font-family: 'iconfont';
		src: url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAMAAAsAAAAABuwAAAKzAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcAqBdIFvATYCJAMICwYABCAFhG0HMhsXBsgOJUHCzMBgAABAPDy/9u3cmfdn38iKJtW4XRUPRbwTMgmil0gmBbqHan/up6/AG6txhgiF/JbTSzNmoxDchAJ2BOdJTvePe6d/BRTIfEC5zD2oCzAOKKC9MYoSLZAC4JbhtYv5EG8TaEyLwjsoqWoCqQQvCsQLvVYJ0oJXkoxEFqqGnUm8AZFcvOLfAXgdfT5+Q0JkCr0SLrnxqFgDed++SYpgyj6lSyDAW84MYx8lNoFE3GmMXhEIgyzQRIXmwbEKg2/fdrvQi6P+eaKC8zswCdxn4jH+o/6yAAkZp8CzSW5yjV/TddG9PE2KDwerex7V292Vfc/4nHpfsXMwvR/SfDLJt/enD0Lbj/j5ufXpqeXhoenxsTlm59nAgqs75GuPxZfPgetPJWcPETtbW7O8waBBXosQzYI79E+bi5nl0lYxGTGbjJjtiI6YEOzsCCYIS7B5S5bSti54eRGAaF1lQ4uaOjolKiurq2NyUTQf8gD+75dPgpa//B0fPlX79jpn/UsVCXzN258H9//9BMPsIN+LLfinvIFdyRdgXZFcXmOycEp6rw2NBv9BdY74mqocfwFzyAWeAYU+U1DKFtFE2oSe1hZUsm1obCjd3xpFCUSqsW4eQRhyAoUBX6A05B5NpE/omfAHlaEooXEv3E9sLcdTeSHFSoY1SDWM9Gpi4aiByePCBqztNylpXhBRWjC16QMoPiaunCjFFkyXWGMb0CYwxiGOEjMqQfdhk4kgKyUGrGYxOsasGbGxXNOTYtTEDHL7KEyJwTQQlWGInhphwYn+jLzy/gaYVj8TJdrR0WNugVE2+uGReDHiBqClUsugjkd5xGaAVgKG4SAcijBDStA0zMSEQKzN0wwwNSaGbkLYKkMs6cUNlcZsLzf/3QFoYFURpKyUXxC1kj2/BgAA');
	}
	.cc-position-input {
		width: 100%;
		position: relative;
		&__position {
			position: absolute;
			right: 0;
			top: -$form-item-height;
			font-size: 26rpx;
			color: var(--light-color);
			line-height: $form-item-height;
			height: $form-item-height;
			color: var(--primary);
			display: flex;
			align-items: center;
			&__icon {
				margin-right: 5rpx;
				font-family: 'iconfont' !important;
				font-size: 36rpx;
				font-style: normal;
				-webkit-font-smoothing: antialiased;
				-moz-osx-font-smoothing: grayscale;
			}
			.icon-location:before {
				content: "\e6ea";
			}
		}
	}
</style>
